<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
            font-size: 20px;
            border: 1px solid black;
            width: 300px;
            height: 100px;
        }
    </style>
</head>
<body>
<h1>ajax入门</h1>
<input id="btn" type="button" value="点击获取数据">
<br><br>
<div id="d1">获取数据显示区域</div>
</body>
<script>
    document.getElementById('btn').onclick = function (){
        const xhr = new XMLHttpRequest();
        xhr.open("GET", 'data.txt', true);
        console.log('事件绑定成功')
        xhr.onreadystatechange = function(){
            console.log("回调函数设置成功")
            if(xhr.readyState === 4 && xhr.status === 200){
                console.log(xhr.responseText)
                document.getElementById('d1').innerHTML = xhr.responseText
            }
        }
        xhr.send();
        // axios.get('data.txt').then(res=>{
        //     document.getElementById('d1').innerHTML = res.data
        // })

    }


</script>
</html>